<template>
  <div id="app" style="background: #000;">
    <p>当前版本：v4</p>
    <button @click="update"> 更 新 </button><br /><br /><br />
    <button @click="refresh"> 刷 新 </button>
  </div>
</template>

<script>
document.body.addEventListener('touchmove', function (e) {
    e.preventDefault(); 
}, {passive: false});

import HelloWorld from './components/HelloWorld.vue'
import * as OfflinePluginRuntime from 'offline-plugin/runtime'

OfflinePluginRuntime.install({
  onUpdateReady: () => {
    console.log('SW Event:', 'onUpdateReady')
    OfflinePluginRuntime.applyUpdate()
  },
  onUpdated: () => {
    console.log('SW Event:', 'onUpdated')
    // Reload the webpage to load into the new version
    window.swUpdate = true
  }
});

console.log(OfflinePluginRuntime);

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods:{
    update(){
      console.log("更新");
      OfflinePluginRuntime.applyUpdate();
    },
    
    refresh(){
      location.reload()
    }
  },
  mounted() {
    
  }
}
</script>




<style>
*{
  margin:0;
  padding:0;
}
html,body, #app{
  height: 100%;
  overflow: hidden;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
}
button{
  height: 40px;
  padding:0 15px;
}
</style>
